<template>
  <!-- 处置 -->
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="drawer"
    width="70%"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <!-- 涉案人信息 -->
    <div class="descriptionsContainer1">
      <div class="pageHeader">涉案人信息</div>
      <el-descriptions
        class="descriptions"
        :column="3"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="姓名">{{
          formData.involvedPersonVO.name
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ formData.involvedPersonVO.zjh }}
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          {{ formData.involvedPersonVO.tel }}
        </el-descriptions-item>
        <el-descriptions-item label="户籍地址">{{
          formData.involvedPersonVO.residenceAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="居住地址">{{
          formData.involvedPersonVO.oucodeNameList[0] +
          formData.involvedPersonVO.oucodeNameList[1] +
          formData.involvedPersonVO.oucodeNameList[2] +
          formData.involvedPersonVO.liveAddress
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
    </div>
   
    <!-- 待核查信息 -->
    <div v-if="uncheckedInformation.length !== 0" class="descriptionsContainer1">
      <div class="pageHeader">待核查信息</div>
      <div :key="index" v-for="(unCheck, index) in uncheckedInformation">
        <el-descriptions
          class="unchecked"
          :column="4"
          size="medium"
          labelClassName="label"
          contentClassName="content"
        >
          <el-descriptions-item label="投资金额(元)">{{
            uncheckedInformation[index].investmentMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="提取金额(元)">
            {{ uncheckedInformation[index].withdrawalMoney }}
          </el-descriptions-item>
          <el-descriptions-item label="损失金额(元)">{{
            uncheckedInformation[index].lossMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="时间">
            {{ uncheckedInformation[index].time }}
          </el-descriptions-item>
          <el-descriptions-item label="开户银行">{{
            uncheckedInformation[index].accountBank
          }}</el-descriptions-item>
          <el-descriptions-item label="开户名称">
            {{ uncheckedInformation[index].accountName }}
          </el-descriptions-item>
          <el-descriptions-item label="开户账号">{{
            uncheckedInformation[index].accountNum
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="pageHeaderSub">
          <div class="title">*相关附件</div>
          <el-button
            class="searchButton1"
            @click="allpicDownload(unCheck.taskAccessoryList)"
            >下载</el-button
          >
        </div>
        <div class="enclosuresBox">
          <div
            class="enclosures2"
            v-for="(item, index) in unCheck.taskAccessoryList"
            :key="index"
          >
            <div class="enclosurebtn2">
              <el-image
                v-if="item.picUrl"
                fit="cover"
                class="picPreview"
                :src="item.picUrl"
              />
              <div class="enclosurebtn3">
                <div class="enclosurebtn4">
                  <img
                    class="enclosureDel3"
                    @click="handleDownload(item)"
                    src="@/assets/images/downloadIcon.png"
                  />
                  <img
                    @click="handlePreview(item)"
                    class="enclosureDel3"
                    src="@/assets/images/viewIcon.png"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-divider
          v-if="index !== uncheckedInformation.length - 1"
        ></el-divider>
      </div>
      <el-divider></el-divider>
    </div>
    <!-- <el-divider v-if="uncheckedInformation.length !== 0"></el-divider> -->
    <!-- 公安调查结果 -->
    <div
      class="descriptionsContainer1"
      v-if="formData.currentLink == 2 || formData.policeInvestigation"
    >
      <div class="pageHeader">公安调查结果</div>

      <!-- 任务基本信息描述 -->
      <el-row :gutter="24">
        <el-col
          :span="15"
          v-if="formData.currentLink == 2 || formData.currentLink == 3"
        >
          <el-form
            class="Investigationform"
            ref="form"
            :model="formData"
            :inline="true"
            :rules="rules"
          >
            <el-form-item label="调查结果:" prop="policeInvestigation">
              <el-input
                class="Investigation"
                v-model="formData.policeInvestigation"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 5 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="23" v-else>
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="调查结果">{{
              formData.policeInvestigation
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <span class="title">*相关附件</span>
        <uploadAttachments
          v-if="formData.currentLink == 2"
          ref="uploadAttachments"
          @uploadDisplay="uploadDisplay"
        ></uploadAttachments>
        <span v-if="formData.currentLink == 2" class="pageleft"
          >支持扩展名：{{ picTypeList }}</span
        >
        <el-button
          class="searchButton1"
          @click="allpicDownload(policeEnclosure)"
          >下载</el-button
        >
      </div>

      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in policeEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
                <img
                  v-if="formData.currentLink == 2"
                  @click="handleDelFile(item, '0')"
                  class="enclosureDel3"
                  src="@/assets/images/delIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
   
    <!-- 检察院审查结果 -->
    <div
      class="descriptionsContainer1"
      v-if="formData.currentLink == 4 || formData.procuratorateInvestigation"
    >
      <div class="pageHeader">检查院审查结果</div>

      <el-row :gutter="24">
        <el-col
          :span="15"
          v-if="formData.currentLink == 4 || formData.currentLink == 5"
        >
          <el-form
            class="Investigationform"
            ref="form"
            :rules="rules"
            :model="formData"
            size="small"
            :inline="true"
          >
            <el-form-item label="审查结果:" prop="procuratorateInvestigation">
              <el-input
                class="Investigation"
                v-model="formData.procuratorateInvestigation"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 7 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="23" v-else>
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="审查结果">{{
              formData.procuratorateInvestigation
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <span class="title">*相关附件</span>
        <uploadAttachments
          v-if="formData.currentLink == 4"
          ref="uploadAttachments"
          @uploadDisplay="uploadDisplay"
        ></uploadAttachments>
        <span class="pageleft" v-if="formData.currentLink == 4"
          >支持扩展名：{{ picTypeList }}</span
        >
        <el-button
          class="searchButton1"
          @click="allpicDownload(procuraEnclosure)"
          >下载</el-button
        >
      </div>

      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in procuraEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
                <img
                  v-if="formData.currentLink == 4"
                  @click="handleDelFile(item, '1')"
                  class="enclosureDel3"
                  src="@/assets/images/delIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    
    <!-- 法院认定结果 -->
    <div
      class="descriptionsContainer1"
      v-if="
        formData.currentLink == 6 ||
        formData.courtJudgement ||
        formData.currentLink == 9
      "
    >
      <div class="pageHeader">法院认定结果</div>

      <!-- 任务基本信息描述 -->
      <el-row :gutter="24">
        <el-col
          :span="15"
          v-if="
            formData.currentLink == 6 ||
            formData.currentLink == 7 ||
            formData.currentLink == 9
          "
        >
          <el-form
            class="Investigationform"
            ref="form"
            :rules="rules"
            :model="formData"
            size="small"
            :inline="true"
          >
            <el-form-item label="认定结果:" prop="courtJudgement">
              <el-input
                class="Investigation"
                v-model="formData.courtJudgement"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 7 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="23" v-else>
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="认定结果">{{
              formData.courtJudgement
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <span class="title">*相关附件</span>
        <uploadAttachments
          v-if="formData.currentLink == 6 || formData.currentLink == 9"
          ref="uploadAttachments"
          @uploadDisplay="uploadDisplay"
        ></uploadAttachments>
        <span
          class="pageleft"
          v-if="formData.currentLink == 6 || formData.currentLink == 9"
          >支持扩展名：{{ picTypeList }}</span
        >
        <el-button class="searchButton1" @click="allpicDownload(courtEnclosure)"
          >下载</el-button
        >
      </div>

      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in courtEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
                <img
                  v-if="formData.currentLink == 6 || formData.currentLink == 9"
                  @click="handleDelFile(item, '2')"
                  class="enclosureDel3"
                  src="@/assets/images/delIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button class="resetButton" @click="cancel">取消</el-button>
        <el-button class="searchButton" @click="temporarySave">暂存</el-button>
        <el-button class="searchButton" @click="Submit">确定</el-button>
      </div>
    </div>

    <picPreview ref="picPreview" :picUrl="picUrl"></picPreview>
  </el-dialog>
</template>

<script>
import picPreview from "../../completeAcceptance/component/picPreview.vue";
import { MODALTYPE, FILETYPE } from "../../../../utils/variable";
import {
  updateCheckTask,
  getCheckTask,
  downloadFile,
  onlinePreview,
  completeTask,
  claimTask,
} from "@/api/checkTask/task";
import uploadAttachments from "./uploadAttachments.vue";
export default {
  dicts: ["case_type", "current_link", "overtime_state"],
  components: { uploadAttachments, picPreview },
  data() {
    return {
      picTypeList: "",
      passTaskquery: {},
      picUrl: "",
      //抽屉是否显示
      drawer: false,
      title: "",
      unCheckEnclosure: [],
      policeEnclosure: [],
      procuraEnclosure: [],
      courtEnclosure: [],
      tableData: [],
      uncheckedInformation: [],
      formData: {
        involvedPersonVO: {
          name: "",
          zjh: "",
          oucodeList: ["省", "市", "区县"],
          oucodeNameList: ["省", "市", "区县"],
          residenceAddress: "",
          liveAddress: "",
          tel: "",
        },
        // 任务名称
        taskName: "",
        // 任务类型
        taskType: "",
        currentLink: "",
        policeInvestigation: "",
        procuratorateInvestigation: "",
        courtJudgement: "",
      },
      rules: {
        policeInvestigation: [
          {
            required: true,
            message: "调查结果",
            trigger: "blur",
          },
        ],
        procuratorateInvestigation: [
          {
            required: true,
            message: "调查结果",
            trigger: "change",
          },
        ],
        courtJudgement: [
          {
            required: true,
            message: "调查结果",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: ["type", "id"],
  created() {
    let labelList = [];
    this.getDicts("pic_type").then((response) => {
      response.data.forEach((el) => {
        labelList.push(el.dictLabel);
      });
      this.picTypeList = labelList.join();
    });
  },
  methods: {
    // 暂存按钮
    temporarySaveRule(element) {
      this.$refs["form"].validateField(element, (errMsg) => {
        if (errMsg) {
          console.log("校验未通过");
        } else {
          console.log("校验通过");
          this.formData.uncheckInfoList = this.uncheckedInformation;
          this.formData.taskAccessoryList = [
            ...this.policeEnclosure,
            ...this.procuraEnclosure,
            ...this.courtEnclosure,
          ];
          updateCheckTask(this.formData).then((response) => {
            this.$modal.msgSuccess("暂存成功");
            this.$emit("update:type", "");
            this.$emit("fatherMethod");
            this.resetForm("form");
            this.drawer = false;
          });
        }
      });
    },
    temporarySave() {
      if (this.formData.currentLink == 2 || this.formData.currentLink == 3) {
        this.temporarySaveRule("policeInvestigation");
      }
      if (this.formData.currentLink == 4 || this.formData.currentLink == 5) {
        this.temporarySaveRule("procuratorateInvestigation");
      }
      if (
        this.formData.currentLink == 6 ||
        this.formData.currentLink == 7 ||
        this.formData.currentLink == 9
      ) {
        this.temporarySaveRule("courtJudgement");
      }
    },
    //取消
    cancel() {
      this.$emit("update:type", "");
      this.resetForm("form");
      this.drawer = false;
    },
    // 图片一键下载
    allpicDownload(item) {
      if (item.length == 0) {
        this.$message({
          message: "当前相关附件为空",
          type: "warning",
        });
      } else {
        for (let i = 0; i < item.length; i++) {
          this.handleDownload(item[i]);
        }
      }
    },
    // 附件下载
    handleDownload(item) {
      this.download(
        "/file/downloadFileNew",
        {
          filename: item.url,
        },
        item.url
      );
    },
    // 附件预览
    handlePreview(item) {
      let queryParam = {
        filename: item.url,
      };
      downloadFile(queryParam).then((res) => {
        let blob = new Blob([res]); // 返回的文件流数据
        let url = window.URL.createObjectURL(blob); // 将他转化为路径
        this.picUrl = url; // 将转换出来的路径赋值给变量，其实和上一步结合就可以
        this.$refs.picPreview.open = true;
      });
    },
    /** 附件删除按钮操作 */
    handleDelFile(row, key) {
      this.$modal
        .confirm("是否确认删除该附件？")
        .then(() => {
          if (key == FILETYPE.policeEnclosure) {
            this.policeEnclosure.forEach((element, index) => {
              if (element.name == row.name) {
                this.policeEnclosure.splice(index, 1);
              }
            });
          }
          if (key == FILETYPE.procuraEnclosure) {
            this.procuraEnclosure.forEach((element, index) => {
              if (element.name == row.name) {
                this.procuraEnclosure.splice(index, 1);
              }
            });
          }
          if (key == FILETYPE.courtEnclosure) {
            this.courtEnclosure.forEach((element, index) => {
              if (element.name == row.name) {
                this.courtEnclosure.splice(index, 1);
              }
            });
          }
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    SubmitRule(element) {
      this.$refs["form"].validateField(element, (errMsg) => {
        if (errMsg) {
          console.log("校验未通过");
        } else {
          console.log("校验通过");
          this.$confirm("提交后将无法修改，是否继续！", {
            confirmButtonClass: "searchButton",
            cancelButtonClass: "resetButton",
          })
            .then((_) => {
              this.formData.uncheckInfoList = this.uncheckedInformation;
              this.formData.taskAccessoryList = [
                ...this.policeEnclosure,
                ...this.procuraEnclosure,
                ...this.courtEnclosure,
              ];
              updateCheckTask(this.formData).then((response) => {
                this.$modal.msgSuccess("处置成功");
                this.$emit("update:type", "");
                this.passTaskquery.id = this.id;
                this.passTaskquery.userId = this.$store.state.user.userId;
                claimTask(this.passTaskquery).then((response) => {
                  completeTask(this.passTaskquery).then((response) => {
                    this.$emit("fatherMethod");
                  });
                });
                this.resetForm("form");
                this.drawer = false;
              });
            })
            .catch((_) => {});
        }
      });
    },
    //提交
    Submit() {
      if (this.formData.currentLink == 2 || this.formData.currentLink == 3) {
        this.SubmitRule("policeInvestigation");
      }
      if (this.formData.currentLink == 4 || this.formData.currentLink == 5) {
        this.SubmitRule("procuratorateInvestigation");
      }
      if (
        this.formData.currentLink == 6 ||
        this.formData.currentLink == 7 ||
        this.formData.currentLink == 9
      ) {
        this.SubmitRule("courtJudgement");
      }
    },

    // 上传附件
    uploadDisplay(value) {
      let fileType = value.data.name.split(".");
      //公安
      if (this.formData.currentLink == 2) {
        let file = {
          name: value.data.name,
          url: value.data.url,
          fileType: fileType[fileType.length - 1],
          accessorySource: FILETYPE.policeEnclosure,
        };
        let queryParam = {
          filename: file.url,
        };
        downloadFile(queryParam).then((res) => {
          let blob = new Blob([res]); // 返回的文件流数据
          let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
          file.picUrl = picurl;
          this.policeEnclosure.push(file);
        });
      }
      //检察院
      if (this.formData.currentLink == 4) {
        let file = {
          name: value.data.name,
          url: value.data.url,
          fileType: fileType[fileType.length - 1],
          accessorySource: FILETYPE.procuraEnclosure,
        };
        let queryParam = {
          filename: file.url,
        };
        downloadFile(queryParam).then((res) => {
          let blob = new Blob([res]); // 返回的文件流数据
          let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
          file.picUrl = picurl;
          this.procuraEnclosure.push(file);
        });
      }
      //法院
      if (this.formData.currentLink == 6 || this.formData.currentLink == 9) {
        let file = {
          name: value.data.name,
          url: value.data.url,
          fileType: fileType[fileType.length - 1],
          accessorySource: FILETYPE.courtEnclosure,
        };
        let queryParam = {
          filename: file.url,
        };
        downloadFile(queryParam).then((res) => {
          let blob = new Blob([res]); // 返回的文件流数据
          let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
          file.picUrl = picurl;
          this.courtEnclosure.push(file);
        });
      }
    },
    showPic(list) {
      if (list.length != 0) {
        for (let i = 0; i < list.length; i++) {
          let queryParam = {
            filename: list[i].url,
          };
          downloadFile(queryParam).then((res) => {
            let blob = new Blob([res]); // 返回的文件流数据
            let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
            this.$set(list[i], "picUrl", picurl);
          });
        }
      }
    },
  },
  watch: {
    type(val) {
      if (this.type == MODALTYPE["处置"]) {
        getCheckTask(this.id).then((response) => {
          this.formData = response.data;
          this.uncheckedInformation = response.data.uncheckInfoList;
          if (this.uncheckedInformation.length != 0) {
            for (let i = 0; i < this.uncheckedInformation.length; i++) {
              if (this.uncheckedInformation[i].taskAccessoryList.length != 0) {
                for (
                  let j = 0;
                  j < this.uncheckedInformation[i].taskAccessoryList.length;
                  j++
                ) {
                  let queryParam = {
                    filename:
                      this.uncheckedInformation[i].taskAccessoryList[j].url,
                  };
                  downloadFile(queryParam).then((res) => {
                    let blob = new Blob([res]); // 返回的文件流数据
                    let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
                    this.$set(
                      this.uncheckedInformation[i].taskAccessoryList[j],
                      "picUrl",
                      picurl
                    );
                  });
                }
              }
            }
          }
          this.policeEnclosure = response.data.taskAccessory[
            FILETYPE.policeEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.policeEnclosure]
            : [];
          this.showPic(this.policeEnclosure);
          this.procuraEnclosure = response.data.taskAccessory[
            FILETYPE.procuraEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.procuraEnclosure]
            : [];
          this.showPic(this.procuraEnclosure);
          this.courtEnclosure = response.data.taskAccessory[
            FILETYPE.courtEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.courtEnclosure]
            : [];
          this.showPic(this.courtEnclosure);
          this.title = "处置";
          this.drawer = true;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式
@import "../../../../assets/styles/drawer.scss";

.pageleftpic {
  cursor: pointer;
  vertical-align: bottom;
  margin-left: 30px;
  width: 16px;
}

.pageHeaderSub {
  display: flex;
  align-items: center;
  padding: 10px 0;
  .title {
    margin: 5px 0 5px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5e5c5c;
  }
  .searchButton1 {
    margin-left: 20px;
    margin-top: 0;
  }
}

.pageleft {
  vertical-align: bottom;
  margin-left: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
.enclosuresBox {
  display: flex;
  flex-wrap: wrap;
}
.enclosure {
  display: flex;
  margin-top: 20px;

  .title {
    margin: 5px 10px;
    font-size: 14px;
    text-align: left;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5e5c5c;
  }

  .enclosuresBox {
    display: flex;
    flex-wrap: wrap;
  }
}

::v-deep .el-descriptions-item__container {
  margin-left: 20px;
}

::v-deep.el-form-item {
  margin-bottom: 0;
  margin-top: 0;
}

//分割线
::v-deep .el-divider--horizontal {
  margin: 14px 0 !important;
}

.Investigationform {
  margin-top: 20px;
  margin-left: 5px;
}

.Investigation {
  width: 400px;
}
.pageleftpic {
  cursor: pointer;
  vertical-align: bottom;
  margin-left: 30px;
  width: 16px;
}
.pageleft {
  vertical-align: bottom;
  margin-left: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
::v-deep .label {
  width: 80px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}
.unchecked {
  ::v-deep .label {
    width: 110px;
  }
}
.dialog-footer {
  .resetButton {
    margin-right: 10px;
  }
}
.enclosures1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 150px;
  .enclosurebtn {
    display: flex;
    align-items: center;
    .enclosureDel {
      margin: 0 5px;
      cursor: pointer;
    }
  }
}
.picPreview {
  width: 100%;
  height: 100%;
}
.searchButton1 {
  width: 60px;
  height: 30px;
  background: #598af9;
  border-radius: 4px;
  margin-right: 10px;
  font-family: Microsoft YaHei;
  letter-spacing: 2px;
  color: #fefbfb;
}
.enclosures2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 120px;
  padding-right: 50px;

  // 图片区域
  .enclosurebtn2 {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 80%;
    // 按钮区域
    .enclosurebtn3 {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(101, 101, 101, 0.6);
      opacity: 0;
      width: 100%;
      height: 100%;
      // 图标样式
      .enclosurebtn4 {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .enclosureDel3 {
        width: 25px;
        height: 25px;
        margin: 5px;
        background-blend-mode: lighten;
        background-size: cover;
        cursor: pointer;
      }
    }
  }

  .enclosurebtn2:hover .enclosurebtn3 {
    opacity: 1;
  }
}
.descriptionsContainer1{
  padding: 15px 30px;
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5e5c5c;
    margin-top: 30px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 5px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #aeafb0;
  }
}
</style>
